<template>

  <div class="second_block" v-if="visible" :style="productPageSize">
    <div style="text-align: center;">
      <img src="/static/logo.png" style="width: 80px;height: 75px">
    </div>
    <el-divider></el-divider>
    <br>
    <div style="font-size: 12pt;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">{{ script_1 }}
    </div>
    <br>
    <div style="font-size: 12pt;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">{{ script_2 }}
    </div>
    <el-rate
      v-model="form.rate"
      @change="doConfirmRate"

      style="font-size: 20px;text-align: center;color: white;">
    </el-rate>
    <br/>
    <br/>
    <div v-if="rateDisplay" style="text-align: center">
      <div style="font-size: 11pt;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">{{script_3}}</div>
      <el-input
        type="textarea"
        maxlength="1000"
        @focus="buttonColor($event)"
        size="10"
        rows="4"
        v-model="form.comment"
        show-word-limit
      >
      </el-input>
    </div>
    <br>
    <div style="text-align: center">
      <el-button type="info" style="width: 90px" @click="doBackGiftSelection" round>Preview</el-button>
      &nbsp;&nbsp;
      <el-button type="warning" style="width: 90px" @click="doConfirmPage" round>Next</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment-on",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {},
      texts: ['差评', '一般', '还行', '好评', '强烈好评'],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      rateDisplay: false,
      productPageSize: '',
      script_1: '',
      script_2: '',
      // script_3:'',
      // script_4:'',
    };
  },
  mounted() {
    // 根据不同路由跳转不同页面
    if (this._isMobile()) {
      this.productPageSize = 'height: calc(100vw - 1px);width:calc(100vw - 30px)';
    } else {
      this.productPageSize = 'height: calc(100vw - 990px)';
    }
  },
  methods: {
    // 判断是否是手机端，如果是，返回true
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    },
    //关闭页面
    handleClose(done) {
      done();
      this.$emit('handleClose');
    },
    buttonColor(event)
    {
      let input = event.currentTarget
      input.style.border = "1px solid rgb(254, 137, 4)"
    },
    setBuyerConfig(data) {
      this.script_1 = data.comment_page_script.script_1;
      this.script_2 = data.comment_page_script.script_2;
      this.script_3 = data.comment_page_script.script_3;
      // this.script_4 = data.comment_page_script.script_4;
    },
    //返回上一级
    doBackGiftSelection() {
      this.$emit('doBackGiftSelection', '');
    },
    //提交星级信息
    doConfirmRate(value) {
      if (value <= 3) this.rateDisplay = true;
      if (value > 3) this.rateDisplay = false;
      this.$emit('doConfirmRate', this.form);
    },
    //调整确认留评页 或 确认礼品页
    doConfirmPage() {
      //判断是否有选择礼品
      if (!this.form.rate) {
        this.$message({type: 'warning', message: 'Please rate', offset: 160});
      } else {
        this.$emit('getCommonOn', this.form);
        // if (this.form.rate >3){
        //   this.$emit('getCommonOn', this.form);
        // }else{
        //   this.$emit('badReviews', this.form);
        // }

      }

    }
  }
}
</script>

<style scoped>

::v-deep .el-rate__icon {
  font-size: 30px;
}

</style>
